import React from 'react'
import { Button, WhiteSpace, WingBlank } from 'antd-mobile'
import {
  connect, //  用于连接数据映射和修改数据映射方法的连接函数 返回值是一个新的组件
} from 'react-redux'
import NavBar from '../component/NavBar'
import asymeth from '../store/asyncMethod/asyncmethod'
import '../assets/css/Barrier.css'
import Loading from './Loading'

class Myapp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      currentCount: 0, // 当前的题目
      selectType: ['', '', '', ''],
      score: 0,
      endTime: 15,
      timer: null,
    }
  }
  componentDidMount() {
    this.props.getQuestionList()
  }
  render() {
    let quetionList = this.props.quetionList
    // console.log(this.props)
    if (quetionList.length === 0) {
      return (
        <div>
          <NavBar params={this.props} name="闯关答题"></NavBar>
          <Loading></Loading>
        </div>
      )
    } else {
      let questionItem = quetionList[this.state.currentCount]
      let asersList = JSON.parse(questionItem.options)
      this.startEnd()
      return (
        <div>
          <NavBar params={this.props} name="闯关答题"></NavBar>
          <div className="main_container">
            <div className="endTime">
              <div className="timeContainer">{this.state.endTime}</div>
            </div>
            <h2>
              {this.state.currentCount + 1}:{questionItem.quiz}
            </h2>
            <div>
              {asersList.map((item, index) => {
                return (
                  <WingBlank key={index}>
                    <Button
                      type={this.state.selectType[index]}
                      onClick={() => {
                        this.chooseAnser(index, questionItem)
                      }}
                    >
                      {item}
                    </Button>
                    <WhiteSpace />
                  </WingBlank>
                )
              })}
            </div>
          </div>
        </div>
      )
    }
  }

  // 开始倒计时
  startEnd = () => {
    if (this.state.timer == null) {
      console.log('kkk', this.state)
      let timer = setInterval(() => {
        let time = this.state.endTime
        if (time === 0) {
          clearInterval(timer)
          this.timeEnd()
        } else {
          this.setState({
            endTime: --time,
          })
        }
      }, 1000)
      this.setState({
        timer: timer,
      })
    }
  }

  // 选择答案
  chooseAnser = (index, question) => {
    clearInterval(this.state.timer)
    console.log('click', index, question)
    if (index + 1 === Number(question.answer)) {
      let selectArr = this.state.selectType
      selectArr[index] = 'primary'
      this.setState({
        selectType: selectArr,
        score: this.state.score + 10,
        endTime: '√',
      })
    } else {
      let selectArr = this.state.selectType
      selectArr[index] = 'warning'
      selectArr[question.answer - 1] = 'primary'
      this.setState({
        selectType: selectArr,
        score: this.state.score + 0,
        endTime: '×',
      })
    }

    this.toNextQuetion()
  }

  // 跳转
  toNextQuetion = () => {
    setTimeout(() => {
      let nowCount = this.state.currentCount
      nowCount++
      let currentCount = nowCount
      if (currentCount === 10) {
        this.props.history.push('/success', { score: this.state.score })
      } else {
        this.setState({
          currentCount: currentCount,
          selectType: ['', '', '', ''],
          endTime: 15,
          timer: null,
        })
      }
      this.startEnd()
    }, 2000)
  }

  // 时间截止
  timeEnd = () => {
    let nowquetion = this.props.quetionList[this.state.currentCount]
    console.log(nowquetion)
    let anser = nowquetion.answer
    let selectType = this.state.selectType
    selectType[anser - 1] = 'primary'
    this.setState({
      selectType: selectType,
    })
    this.toNextQuetion()
  }
}

// 将state银映射到props中
function mapStateToProps(state) {
  return {
    quetionList: state.quetionList,
  }
}

// 进啊给修改state数据的方法映射到props
function mapDispatchToProps(dispatch) {
  return {
    getQuestionList: async () => {
      let res = await asymeth.questionList()
      if (res.data.code === 200) {
        dispatch({ type: 'setQuetion', content: res.data.result })
        return
      }
      dispatch({ type: 'setQuetion', content: '题目获取失败' })
    },
  }
}

const Barrier = connect(mapStateToProps, mapDispatchToProps)(Myapp)

export default Barrier
